<!--  -->
<template>
  <div>
    <div class="user" style="margin: 15px">
      <div style="margin-bottom: 5px">
        <el-input
          placeholder="请输入商品名称"
          style="width: 300px"
          v-model="searchText"
        >
          <i slot="prefix" class="el-input__icon el-icon-search"></i>
        </el-input>
        <el-button
          style="margin-left: 5px"
          type="primary"
          @click="searchCommodity"
          >搜索
        </el-button>
        <el-button style="margin-left: 5px" type="success" @click="addItem"
          >新增商品
        </el-button>
        <el-button style="margin-left: 5px" type="success" @click="getAll"
          >加载全部
        </el-button>
      </div>

      <el-table :data="commoditys" border stripe height="600">
        <el-table-column type="index" label="序号"> </el-table-column>
        <el-table-column prop="id" label="ID"></el-table-column>
        <el-table-column prop="name" label="商品名称"></el-table-column>
        <el-table-column label="商品主图" align="center">
          <template slot-scope="scope">
            <el-image
              :src="scope.row.url"
              style="width: 50px; height: 50px"
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column prop="price" label="商品单价"></el-table-column>
        <el-table-column prop="one" label="商品一级分类"></el-table-column>
        <el-table-column prop="two" label="商品二级分类"></el-table-column>
        <el-table-column label="操作1">
          <template slot-scope="scope">
            <el-button type="primary" @click="editItem(scope.row)"
              >修改</el-button
            >
          </template>
        </el-table-column>

        <el-table-column label="操作2">
          <template slot-scope="scope">
            <el-button
              type="danger"
              @click="delCommodity(scope.$index, commoditys, scope.row)"
              >下架</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-pagination></el-pagination>
    </div>
    <el-dialog :visible.sync="dialogPvVisible" title="商品维护">
      <edit-commodity :id="curId"></edit-commodity>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogPvVisible = false"
          >Confirm</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import EditCommodity from "./editCommodity.vue";
import {
  getAllCommodity,
  searchCommodityByName,
  delCommodityById,
} from "@/api/commoditys";
import { Message } from "element-ui";
export default {
  name: "",
  props: [""],
  data() {
    return {
      curId: -1,
      searchText: "",
      commoditys: null,
      dialogPvVisible: false,
    };
  },
  components: {
    EditCommodity,
  },
  created() {
    this.getAll();
  },
  computed: {},
  beforeMount() {},
  mounted() {},
  methods: {
    getAll() {
      getAllCommodity().then((res) => {
        res.code === 20000
          ? (this.commoditys = res.data)
          : Message.error("加载数据失败" + res.message);
      });
    },
    searchCommodity() {
      searchCommodityByName(this.searchText).then((res) => {
        res.code === 20000
          ? (this.commoditys = res.data)
          : Message.error("加载数据失败" + res.message);
      });
    },
    delCommodity(index, rows, row) {
      delCommodityById(row.id).then((res) => {
        if (res.code === 20000) {
          rows.splice(index, 1);
          Message.success("删除成功");
        } else {
          Message.error("删除失败" + res.message);
        }
      });
    },
    editItem(row){
      this.curId = row.id
      this.dialogPvVisible = true
    },
    addItem(){
      this.curId = -2;
      this.dialogPvVisible = true
    }
  },
  watch: {},
};
</script>

<style lang='' scoped>
</style>